<script>
$(document).ready(function() {
// set the default content from data-defaultsource
    // if your page is script-heavy, you may want to make this execute early
    // in the $(document).ready() handler to avoid ugly delays.
    $('div.tabcontrol.body').each(function() {
        $(this).html($('#' + $(this).data('defaultsource')).html());
    });

    // handle click on tabs
    $('li.tabcontrol.tab').click(function() {
        $('#' + $(this).data('target')).html( $('#' + $(this).data('source')).html());
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
    });
})
</script>
<div class="tabcontrol">
    <ul class="tabcontrol tabs" style="{{include.headerstyle}}">
        {% for tab in include.tabs %}
            <li class="tabcontrol tab {% if {tab[1].active %}active{% endif %}" data-name="{{tab[1].name}}" data-target="tab_{{include.id}}" data-source="{{include.id}}__{{tab[1].source}}">
                {{tab[1].title}}
            </li>
            {% if tab[1].active %}
                {% assign defaultsource = tab[1].source %}
            {% endif %}
            {% if tab[1].content %}
            <div id="{{include.id}}__{{tab[1].source}}" class="hidden">
                {{tab[1].content | markdownify }}
            </div>
            {% endif %}
        {% endfor %}
    </ul>
    <div id="tab_{{include.id}}" class="tabcontrol body {{include.bodyclass}}" style="{{include.bodystyle}}" data-defaultsource="{{include.id}}__{{defaultsource}}">
    </div>
</div>
